<script setup lang="ts">
import { ref, watch } from 'vue'

interface target {
  label: string
  value: string
}

let props = withDefaults(defineProps<{ yesList: Array<target> }>(), {
  yesList: () => [],
})

const yesList = toRef(props.yesList)

// 右侧
let noList = ref<Array<target>>([])

const addToNoList = (obj: target) => {
  yesList.value = yesList.value.filter(item => item.value !== obj['value']) // 从左边删除
  noList.value.push(obj) // 添加到右侧

  emit('sendList', noList.value)
}

const addToYesList = (obj: target) => {
  noList.value = noList.value.filter(item => item.value !== obj['value']) // 从右边删除
  yesList.value.push(obj) // 添加到左边

  emit('sendList', noList.value)
}

// 全选，取消全选
const allCheck = () => {
  if (yesList.value.length) {
    noList.value.push(...yesList.value)
    yesList.value = []
  } else if (noList.value.length) {
    yesList.value.push(...noList.value)
    noList.value = []
  }
  emit('sendList', noList.value)
}

const emit = defineEmits<{
  sendList: [noList: Array<target>]
}>()

// 筛选
const debounce = (fun: any, wait = 500) => {
  let timerId: ReturnType<typeof setTimeout> | null = null
  return function (...args: any[]) {
    if (timerId) clearTimeout(timerId)
    timerId = setTimeout(() => {
      fun.apply(null, args)
    }, wait)
  }
}
const getFilterList = (e: any) => {
  let iptVal = e.target.value
  // console.log('iptVal=', iptVal)

  const allList = props.yesList
  const rightList = noList.value

  if (iptVal != '' && noList.value.length == 0) {
    // 搜索内容不为空 && 没选中的 -> 从allList中挑出符合条件的
    yesList.value = allList.filter(item => item.label.indexOf(iptVal) != -1)
  } else if (iptVal != '' && noList.value.length > 0) {
    // 搜索内容不为空 && 有选中的 -> 从allList中先过滤掉选中的，再挑出符合条件的
    yesList.value = allList.filter(item => {
      if (!rightList.some(jtem => jtem.value == item.value) && item.label.indexOf(iptVal) != -1) {
        return item
      }
    })
  } else if (noList.value.length == 0) {
    // 没有选中的
    yesList.value = allList
  } else if (noList.value.length == allList.length) {
    // 全选了
    yesList.value = []
  } else if (iptVal == '') {
    // 搜索内容为空，从allList中过滤掉选中的
    yesList.value = allList.filter(item => {
      if (!rightList.some(jtem => jtem.value == item.value)) {
        return item
      }
    })
  }

  // console.log('yesList=', yesList.value)
}
const debouncedFilterList = debounce(getFilterList)
</script>

<template>
  <div style="width: 400px; margin-left: 40px; margin-top: 10px">
    <a-input @input="debouncedFilterList" placeholder="请搜索"></a-input>
  </div>

  <div class="mainbox">
    <div class="box">
      <div class="tag" v-for="(item, index) in yesList" @click="addToNoList(item)">
        {{ item.label }}
      </div>
    </div>

    <div
      @click="allCheck"
      style="color: #1890ff; position: absolute; top: 43%; font-size: 23px; cursor: pointer"
    >
      <SwapOutlined />
    </div>

    <div class="box">
      <div class="tag" v-for="(item, index) in noList" @click="addToYesList(item)">
        <span style="padding: 0 5px">{{ item.label }}</span>
        <MinusCircleOutlined style="color: #000" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.mainbox {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;

  .box {
    width: 400px;
    height: 300px;
    // border: 1px solid #1890ff;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    overflow-y: scroll;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .tag {
      color: rgba(0, 0, 0, 0.6);
      height: 30px;
      line-height: 30px;
      padding: 0 8px;
      margin: 5px;
      border-radius: 5px;
      background-color: rgba(160, 220, 255, 0.7);
      display: inline-block;
      cursor: pointer;
    }
  }
}
</style>
